<template>
	<div class="page">
		<p>
			基本用法 <gr-stepper v-model="num1" />
		</p>
		<p>
			限制范围(1~15) <gr-stepper v-model="num2" :min="1" :max="15" />
		</p>
		<p>
			设置步长(2) <gr-stepper v-model="num3" :step="2"/>
		</p>
		<p>
			设置步长(0.3) <gr-stepper v-model="num4" :step="0.3"/>
		</p>
		<p>
			禁用输入框 <gr-stepper v-model="num5" input-disabled/>
		</p>
		<p>
			限制为整数（步长最小为1） <gr-stepper v-model="num6" integer :step="0.1" />
		</p>
		<p>
			调整尺寸 <gr-stepper v-model="num6" integer :step="0.1" input-width="80px" btn-size="50px"/>
		</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				num1: 10,
				num2: 15,
				num3: 1,
				num4: 1.1,
				num5: 1,
				num6: 0.6,
				num7: 1,
			}
		},
		mounted() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	html {
		background-color: white;
	}
	.page {
		padding: 0 10px;
		p {
			font-size: 14px;
			color: #666;
			padding: 5px 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eee;
		}
	}
</style>
